<template>
  <!--
* @Author: liuzehai
* @Motto: 求知若渴,虚心若愚
 * @LastEditTime: 2021-08-11 16:14:11
* @Description: 日志列表
 * @FilePath: /basic-services/src/views/blog/blog.vue
-->
  <div class="app-container">
    <div id="classification">
      <div class="searchHeader">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-select v-model="listQuery.tenantId" placeholder="请选择租户">
              <el-option v-for="item in tenantlist" :key="item.id" :label="item.tenantName" :value="item.id"></el-option>
            </el-select>
          </el-col>
           <el-col :span="4">
             <el-input
            class="filter-item"
            v-model="listQuery.module"
            placeholder="请输入模块名称"
            clearable></el-input>
          </el-col>
           <el-col :span="3">
              <el-select v-model="listQuery.success" clearable placeholder="请选择状态">
              <el-option label="成功" value="1"></el-option>
              <el-option label="失败" value="0"></el-option>
            </el-select>
          </el-col>
          <el-col :span="10">
            <el-date-picker
              v-model="createTime"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions0"
              :default-time="['00:00:00']">
            </el-date-picker>
          </el-col>
           <el-col :span="3">
             <el-button type="primary" icon="el-icon-search" @click="searchBtn">查询</el-button>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="20" type="flex" class="row-bg" justify="end">
           <el-col :span="3">
             <el-button type="primary" icon="el-icon-delete" v-permission="{code: 'base:blog:delete'}" @click="batchDelete">批量删除</el-button>
          </el-col>
        </el-row> -->
      </div>
      <div class="table">
        <el-table :data="tableData" ref="multipleTable" stripe border @selection-change="changeBox" :row-key="getRowKeys" style="width: 100%">
           <el-table-column type="selection" :reserve-selection="true" class-name="isCheck" align="center" width="50"></el-table-column>
           <el-table-column prop="tenantName" label="租户名称" width="150">
          </el-table-column>
           <el-table-column prop="operator" label="操作人" width="150">
          </el-table-column>
           <el-table-column prop="ip" label="请求ip" width="150">
          </el-table-column>
          <el-table-column prop="method" label="请求接口" width="150">
          </el-table-column>
          <el-table-column prop="module" label="模块" width="150">
          </el-table-column>
           <el-table-column
            label="请求参数"
            align="center"
            class-name="small-padding">
            <template v-slot="{ row }">
              <el-popover
                placement="right"
                title="请求参数"
                width="300"
                trigger="hover"
                :content="row.params">
                <el-button type="text" slot="reference">参数详情</el-button>
              </el-popover>
            </template>
          </el-table-column>
         <el-table-column label="是否成功" align="center" width="80">
          <template v-slot="{ row }">
            <div :class="[row.success== 0 ? 'yuan':'yuans']"></div>
          </template>
        </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="150">
          </el-table-column>
          <el-table-column prop="time" label="执行时间(毫秒)" width="150">
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding"
            fixed="right"
            width="150">
            <template v-slot="scope">
              <div class="btnnuma">
                <el-button
                  type="primary"
                  size="small"
                  @click="viewShow(scope.row)">查看</el-button>
                <el-button
                  type="danger"
                  size="small"
                  v-permission="{code: 'base:blog:delete'}"
                  @click="deleteButton(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="totalElements"
          :page.sync="page.pageNumber"
          :limit.sync="page.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <el-dialog
      center
      title="查看日志详情"
      width="60%"
      top="10vh"
      :visible.sync="dialogCarInfoVisible">
      <el-form label-position="left" label-width="80px">
         <el-form-item label="租户名称">
          <span>{{formLabelAlign.tenantName}}</span>
        </el-form-item>
        <el-form-item label="服务名">
          <span>{{formLabelAlign.serviceName}}</span>
        </el-form-item>
        <el-form-item label="模块">
          <span>{{formLabelAlign.module}}</span>
        </el-form-item>
        <el-form-item label="是否成功">
          <span>{{formLabelAlign.success == 1 ? '成功':'失败'}}</span>
        </el-form-item>
        <el-form-item label="操作人">
          <span>{{formLabelAlign.operator}}</span>
        </el-form-item>
        <el-form-item label="执行时间">
          <span>{{formLabelAlign.time}}ms</span>
        </el-form-item>
        <el-form-item label="请求参数">
          <span>{{formLabelAlign.params}}</span>
        </el-form-item>
        <el-form-item label="操作IP">
          <span>{{formLabelAlign.ip}}</span>
        </el-form-item>
        <el-form-item label="异常信息">
          <span>{{formLabelAlign.stackTrace}}</span>
        </el-form-item>
        <el-form-item label="创建时间">
          <span>{{formLabelAlign.createTime}}</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCarInfoVisible = false">返回</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import commodity from "@/api/commodity";
export default {
  name: "classification",
  components: {
    Pagination,
  },

  data() {
    return {
      pickerOptions0: {
         disabledDate(time){
            return time.getTime() < (Date.now() - 3600 * 1000 * 24 * 183) ||time.getTime() > Date.now() //选择时间范围
          }
        },
        getRowKeys(row) {
        return row.id;
      },  
      systematic: "",
      value6: "",
      createTime:"", //时间
      listQuery: {
        beginTime:"",  //开始查询时间
        endTime:"",  //结束查询时间
        module:"",
        success:"",
        tenantId:""
      },
      page: {
        pageNumber: 1,
        pageSize: 10,
      },
      tableData: [],
      totalElements: 0,
      dialogCarInfoVisible: false,
      labelPosition: "right",
      formLabelAlign: {
        serviceName:"",
        tenantName:"",
        action: "",
        createTime: "",
        ip: "",
        method:"",
        module:"",
        operator:"",
        params:"",
        stackTrace:"",
        state:"",
        success:"",
        time:""
      },
      tenantlist:[],
      selectedList:[] //批量删除数组
    };
  },

  created() {
    this.getList()
  },
  mounted() {

  },
  methods: {
     getList() {
       this.listQuery.beginTime = this.createTime[0]
       this.listQuery.endTime = this.createTime[1]
      const params = Object.assign(this.listQuery, this.page);
      commodity.getlogList(params).then((response) => {
        this.tableData = response.data.records;
        this.totalElements = response.data.total;
        this.page.pageNumber = response.data.current;
        this.page.pageSize = response.data.size;
      });
    },
    //获取用户数据
     getlistForLog() {
      commodity.tenantlistForLog(this.sessionData("get", "tenantId")).then((res) => {
        this.tenantlist = res.data
        this.listQuery.tenantId = this.tenantlist[0].id
         this.getList()
       
      });
    },
    //搜索
    searchBtn(){
      this.getList()
    },
    // 查看日志详情
    viewShow(row) {
      this.dialogCarInfoVisible = true;
      this.title = "查看日志";
      this.formLabelAlign.module = row.module
      this.formLabelAlign.action = row.action
      this.formLabelAlign.createTime = row.createTime
      this.formLabelAlign.ip = row.ip
      this.formLabelAlign.operator = row.operator
      this.formLabelAlign.params = row.params
      this.formLabelAlign.stackTrace = row.stackTrace
      this.formLabelAlign.state = row.state
      this.formLabelAlign.success = row.success
      this.formLabelAlign.time = row.time
      this.formLabelAlign.serviceName = row.serviceName
      this.formLabelAlign.tenantName = row.tenantName

    },
    //删除
    deleteButton(scope) {
      this.$confirm("确认删除该日志信息？", "删除日志", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          commodity.deletelog(scope.id).then((res) => {
            if (res.status == 200) {
              this.$notify({
                title: "提示：",
                message: "删除日志成功",
                type: "success",
                duration: 2000,
              });
              this.getList();
            } else {
              this.$notify({
                title: "提示：",
                type: "error",
                message: res.msg,
                duration: 3000,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    batchDelete(){
       if (this.selectedList.length == 0) {
          this.$message({
            showClose: true,
            message: "请先勾选要删除的日志",
            type: "error",
          });
          return;
        }
        this.$confirm("确认删除该日志信息？", "删除日志", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          commodity.batchDelete(this.selectedList).then((res) => {

            if (res.status == 200) {
              this.$notify({
                title: "提示：",
                message: "删除日志成功",
                type: "success",
                duration: 2000,
              });
              this.$refs.multipleTable.clearSelection();
              this.getList();
            } else {
              this.$notify({
                title: "提示：",
                type: "error",
                message: res.msg,
                duration: 3000,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //批量删除
    changeBox(val) {
      this.selectedList = []
      val.forEach((item) => {
        this.selectedList.push(item.id)
      })
    },
  },
  watch: {},
  computed: {},
};
</script>

<style lang="scss" scoped>
#classification {
  flex: 1;
  height: 0;
  display: flex;
  flex-direction: column;

  .table {
    flex: 1;
    overflow: auto;
  }
}

.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
.yuan{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
  margin-left: 18px;
}
.yuans{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: green;
  margin-left: 18px;
}
.searchBtn {
  padding-top: 20px;
}
::v-deep .el-popover{
  height: 300px;
}
</style>
